<!DOCTYPE html>
<html>


<!--文化程度-->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 百度ECHarts</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../css/bootstrap-markdown.min.css" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>各残疾类别/残疾等级残疾人分布</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="../graph_flot.html#">选项1</a>
                            </li>
                            <li><a href="../graph_flot.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="chart5" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>城乡不同文化程度残疾人分布</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="../graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="../graph_flot.html#">选项1</a>
                            </li>
                            <li><a href="../graph_flot.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="chart6" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <form>
                <input name="title" type="text" placeholder="Title?" />
                <textarea name="content" data-provide="markdown" rows="10"></textarea>
                <label class="checkbox">
                    <input name="publish" type="checkbox"> Publish
                </label>
                <hr/>
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </div>

</div>
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../js/bootstrap-markdown.js"></script>
<script src="../js/bootstrap-markdown.zh.js"></script>
<script src="https://cdn.bootcss.com/markdown.js/0.5.0/markdown.min.js"></script>
<script src="https://cdn.bootcss.com/to-markdown/3.1.0/to-markdown.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.js"></script>
<script src="../js/content.min.js?v=1.0.0"></script>
<script src="../js/demo/echarts-demo.min.js"></script>
<script src="../js/template.js"></script>
<script>
    var myChart5 = echarts.init(document.getElementById('chart5'));
    option5 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid:{
            x:30,
            y:45,
            x2:5,
            y2:20,
            borderWidth:1,
            height:300,
        },
        legend: {
            data:['一级','二级','三级','四级']
        },
        xAxis: [
            {
                type: 'category',
                data: ['视力','听力','言语','肢体','智力','精神','多重'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '人数',
                min: 0,
                max: 500,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'一级',
                type:'bar',
                data:[200, 49, 70, 420, 260,53,60]
            },
            {
                name:'二级',
                type:'bar',
                data:[26, 59, 90, 204, 87,12,34]
            },
            {
                name:'三级',
                type:'bar',
                data:[50, 20, 33, 90,80,52,123]
            },
            {
                name:'四级',
                type:'bar',
                data:[50, 20, 33, 90,80,12,345]
            }
        ]
    };

    myChart5.setOption(option5);
    var myChart6 = echarts.init(document.getElementById('chart6'));
    option6 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid:{
            x:30,
            y:45,
            x2:5,
            y2:20,
            borderWidth:1,
            height:300,
        },
        legend: {
            data:['农业','非农业']
        },
        xAxis: [
            {
                type: 'category',
                data: ['文盲','小学','初中','高中','中专','大专','本科及以上','其他'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '人数',
                min: 0,
                max: 500,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'农业',
                type:'bar',
                data:[212, 19,123,43,26,36,46,102,152]
            },
            {
                name:'非农业',
                type:'bar',
                data:[200, 49,12,313,123,123,34,323,235]
            }
        ]
    };

    myChart6.setOption(option6);
    function randomData() {
        return Math.round(Math.random()*1000);
    }
</script>
</body>
</html>
